Líneas, fondos, colores, esquinas redondeadas, nuestra sidebar la podemos diseñar a nuestro antojo.
Siempre digo que en el CSS de nuestra plantilla hay un mundo por descubrir, y es que las posibilidades que nos brinda son extraordinarias.
No hace falta ser entendido en HTML solo hay que ponerle ganas. Por supuesto que debe haber infinidad de ideas llevadas a la práctica, yo traigo esta que descubrí semanas atrás cuando intentaba darle un cambio a la sidebar.
Al final me decidí por esta línea roja a gusto de unos y desaprobación de otros, a mi me gusta y de cualquier forma seguro que algo llamará mi atención y decidiré probar otro cambio cualquier día.
Redondear las esquinas es algo muy sencillo, bastará añadir un pequeño código en nuestra plantilla justamente en #sidebar-wrapper-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
En -moz-border-radius añadiremos la cantidad de acuerdo al efecto deseado en las esquinas, a menor cantidad más cerrado quedará el arco.En solid escogeremos el tipo de borde y en #cc6666; podemos cambiar el color.
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
background:#cc9999;
Otra variedad sería añadir un color de fondo, para ello agregaremos background:#cc9999; sustituyendo #cc9999 por el color escogido.Una vez finalizado quedaría algo así:
#sidebar-wrapper {
width: 180px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
background:#cc9999;
margin: 0 0 1px 0;
padding: 5px 5px 5px 22px;
float: right;
font-size: 10px; text-transform: uppercase;
word-wrap: break-word;
overflow: hidden;
}
Si en lugar de añadir color queremos añadir una imagen de fondo bastará con sustituir background:#cc9999; por background:url('url-de-tu-imagen');
Debo añadir que el efecto esquinas redondeadas no se visualiza con Explorer, en su lugar veremos líneas rectas.
En IE, las esquinas no se ven redondeadas, solo en Firefox, lo se porque algo parecido tengo yo en mi blog.
Gracias Alma, no he podido acceder a tu blog pero si he comprobado lo que comentas ;)
Si, lo he puesto en mi Blog,y no ve ven redondeadas... Pero me gusta, buscaba algo asi. Se podría hacer tb para donde estan los post???
Otra cosa gema, en la sidebar, me gustaria que quedara todo centrado, si lo ves, me queda todo en un lateral del recuadro y esteticamente no queda bien.
Muchas gracias!!!!
Vale, lo he hecho en el Main...pero no me convence...alguna sugerencia?
A mi tampoco me convence demasiado Noa, la sugerencia es que incluyas en el código lo siguiente:
margin: 0 0 1px 0;
padding: 5px 5px 5px 22px;
Eso te dará una idea de como quedaría de centrado, puedes jugar con las medidas e ir viendo en vista previa el resultado.
¿Otra sugerencia? Prueba a añadir -moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 1px solid #ffff66; en .post-footer { eso haría el mismo efecto en el texto debajo de las entradas.
O en los títulos de las entradas, en .post h3 {
Todo es probar ;)
Ufff... No se que hacer, lo q tengo claro es que quiero hacer algo que lo separe,pero no se... Colorearlo, barras,estoy liadisima.
Gracias bombon!
Ah,unos amigos bloggerillos hemos hecho un forito, está en ello, quedas invitada, lo primero que he hecho ha sido recomendarte http://forodeblogers.creatuforo.com/
Besazosss!
Pues nada sepáralo con la primera indicación y lo demás ya irá llegando.
Gracias por la invitación, el mío lo tengo abandonado :(
Hola Gem@, una pregunta, a mi me gusta lo de las lineas de separación pero no ponerlas en toda la sidebar, con lo que utilizo <fieldset> para donde necesito.
Se podría hacer algo con esto??, es decir que pudiera dar el grosor de la linea y los rellenos pero escogiendo con <fieldset> en que elementos quiero.
Gracias por tu ayuda. Un abrazo
Hola Silvia :)
A la etiqueta <fieldset> le puedes modificar el grosor si añades entre en la plantilla lo siguiente:
fieldset {
border: 3px double #FF6600;
}
¿Dónde añadirlo?
En algunos blogs he visto que indican añadirlo entre <head> y /head> sin embargo yo no lo veo conveniente ya que el código se visionaría en la cabecera del blog.
Yo lo añadiría en #main-wrapper { si lo quieres añadir en las entradas y en #sidebar-wrapper { si es para la sidebar.
En border puedes escoger el grosor del borde.
A double le puedes dar el color que te guste es el color del borde.
Me gustaría saber como hago para poner en una tabla, o como personalizar los comentarios, necesito que sea llamativo asi como el tuyo. visitame en: EL MEJOR SABOR, espero te des una vueltita y me recomiendas algo para cambiar.
En esta entrada tienes la forma de hacerlo anónimo.
Bueno gem@, he hecho lo que pude, que no es mucho por cierto, quiero que los textos del main me queden con un margen razonable, que la imagen termine al terminar el post, tengo otra imagen que sería el final, el recuadro, me entiendes?
Sinó se repite y se vuelve a ver la parte de arriba encimada con la de abajo, bueno sería mejor que lo mires y te vas a dar cuenta de lo que quiero.
En la sidebar también quiero que se divida en bloques con la imagen final que no se donde poner, o sea el borde de abajo, no se si me explico.
El banner-cabecera después lo hago, eso es lo mas fácil.
Por favor miralo y me decís si?
Está en mi perfil, es el blog nuevo.
Besotes gem@!! ;)
Ya habilité el perfil, no me había dado cuenta, lo quería sacar del nuevo blog y lo saqué de todos, pensé que podía deshabilitarlo solo para ese, pero no...:o Eso si, saqué la imagen, voy a cambiarla aunque todavía no se por cual juaaa
Ahora puedes ver el nuevo blog y decirme sobre las imagenes.
Besoooootes!! xD
Para que la imagen no ocupe todo el espacio de las entradas debes añadir las líneas de código en .post { K_nelita de todas formas dame de tiempo hasta luego a la noche que tengo pendiente crear una entrada sobre dividir secciones y te vendrá bien ;)
Gracias gem@, pero no se que lineas debo añadir en .post, igualmente ahora lo corregí de acuerdo a una entrada de Rosa, pero no me sale el borde inferior de las imagenes en la sidebar.
Ahora tiene el borde final en el main, pero sigue saliendo todo de corrido, sin separacion.
Te espero hasta la noche, allí no debe faltar mucho no??
Cambié las imagenes por otras enteras con borde arriba y abajo todo en una sola imagen, si tienes tiempo miralo.
Besooooootes! ;)
Siento tardar k_nelita pero hacer las entrada con capturas alarga la cosa.
Mira aquí.
Bien Gema, pero ¿Que puedes hacer para que dicho efecto se vea en IE?, mira mi página con esos efectos en Firefox... ¿Que posibilidad hay que esos mismos efectos aparezcana en IE?
http://www.laplegariadeunpagano.com/
Saludos Víctor, con este código no hay forma posible de visualizar las esquinas redondeadas en IE, hay otros caminos como por ejemplo hacerlo con imágenes pero es laborioso.
Otra solución sería con Nifty Corner no he llegado a probar este último pero si quieres puedes ver esta entrada de Pizcos donde explica como hacerlo. :)
Hola Gem@, buenos aportes de tu parte.
También ando modificando la apariencia de mi blog en el código CSS y tengo una duda que quizás ya hayas resuelto, deseo aumentar el ancho de la sección donde se despliegan los post. Pobre modificando el campo width del #main-wrap1 y de #main, el ancho cambia, pero al hacerlo la esquina redondeada de la derecha se queda en la ubicación anterior, ¿cómo podré hacer que se vea en la nueva posición?
Hola atoBeto eso ocurre porque las esquinas son una imagen, al darle amplitud a esa zona la esquina (que es una imagen) se queda en el mismo sitio y da esa sensación de partida o quebrada.
La solución es crear una imagen igual a la que tienes ahora de las esquinas pero del mismo tamaño del espacio que vas a añadir.
No sé si fui clara :o
Sí fuiste clara, gracias.
La pregunta que me surge es, ya que tenga el archivo de la imagen con el ancho que quiero, ¿cómo lo subo al servidor? Para accederlas como el resto por una URL como http://www1.blogblog.com/rounders4/corners_main_bot.gif
Creo que ya encontré una forma, la probaré, gracias.
atoBeto en una entrada de Blogger puedes subirlas y luego dejarla en borrador, así copias la url y la pegas en la plantilla :)
Hola Gem@, muchas gracias con por la información, estoy creando un blog hace pocos dias, y he avanzado de saber nada a saber un poco en edición de su diseño, gran parte de lo que he hecho te lo devo a ti o a JMiur, ambos tienen unos blog que ayudan muchisimo.
Bueno, mi consulta, he implementado esto de los bordes redondeados en mi sidebar, pero como dices solo se ve de esa manera en firefox y no en explorer, pero tengo una hipotesis, talves si pongo una imagen de fondo (que sea solo un rectangulo de un color con bordes redondeados) en el sidebar podría verse en cuanlquier navegador, pero mi duda es, al crear la imagen, ademas del ancho, devo darle la altura exacta de mi sidebar? o hago una imagen con una altura de un valor pequeño y se estira sola hacia abajo?
Saludos Dark Side Nico, si el lugar donde vas a añadir la imagen es de una altura fija resultará bien, pero si por el contrario se van añadiendo gadgets o contenido la sidebar irá alargandose y aumentando de altura mientras que la imagen tendrá la misma medida y no ocupará todo el espacio.
Lo que se hace en esos casos es crear tres imágenes una superior, el centro y la que se añade al final. De esa forma el contenido van tomando altura y las esquinas redondas permanecen sin variar.
Sobre este tema no puedo ayudarte demasiado ya que lo que te he explicado es lo que suelo ver pero no lo he probado, quien si puede ayudarte es J.Miur o Pizcos si no recuerdo mal lago hay en su blog sobre este tema ;)
Donde "lago" quise decir algo (algo hay en su blog ...) :S
Hola,,, oye sabes el codigo para q las imagenes del blog se vean redondeadas asi como el sidebar, es q estoy buscando como loco pero no encuentro un codigo que haga que las imagenes se dejen de ver cuadradas.... Please
yz Saludos Candy-Duff ahora mismo no recuerdo un código que redondee las imágenes, hay scripts que si lo consiguen y editores online.
Mira aquí ;)
hola gema! he conseguido poner en el main las esquinas redondeadas.
El problema lo tengo que al ensanchar el main se me ha quedado una linea y no se como quitarla. puedes ayudarme?
este es mi blog
http://svffaura.blogspot.com
vigago10@hotmail.com
vicky
saludos
yz Vicky esa línea es una imagen, se encuentra en:
#main {
background:url("http://www.blogblog.com/rounders4/rails_main.gif") repeat-y left;
padding:0;
width:680px;
}
Si eliminas lo que está en negrita desaparece.
Mira en vista previa antes de guardar cambios ;)
muchas gracias gema!!! perfecto. ya esta. mil gracias de nuevo
yz Estupendo Vicky :)
Hola Gema!
Yo otra vez!
Un poco complicado con mi plantilla...
1. Quisiera saber si es posible hacer que mi SIDEBAR se vea semi-transparente...osea, el mismo color pero que se pueda ver atraves de él.
2. Mi plantilla supuestamente es de 3 columnas, pero una de ella es sólo para que aparezca la fecha, el autor y el numero de comentarios...¿Podría usar esa columna para agregar otros datos?
Gracias por tu ayuda Gema!
Un saludo
y exito en todo!
PD: talvez mi sidebar es una imagen alojada en algun servidor, creo que es así porque los widgets estan divididos por secciones.
www.retroicon.blogspot.com
yz Es una sola imagen que hace de fondo para las dos sidebars y en main:
http://174.132.149.5/~tmwwtw/oneroom/img/content_bg.jpg
Imagino que en la sidebar que deseas modificar no se ve opción de añadir nuevos gadgets de ahí tu duda a poder añadirlos.
Al no ser una plantilla original de Blogger tengo mis dudas sobre si puedes o no añadir nuevos gadges tendría que añadirla e mi blog de pruebas ¿tienes la página de donde la descargaste?
Saludos y suerte para ti también :D
Me ha encantado tu blog, me ha parecido muy práctido y todo está muy bien explicado, un saludo
http://consejoserasmusenparis.blogspot.com/
yz Gracias Petite :)
como hago para darle curbatura e las esquinas de arriba, yo ya lei la entrada de banakabanaka, pero mi problema es que yo uso sriptaculous y como sabes no se pueden usar los dos al mismo tiempo, se puede poner el efecto a solo las esquinas de arriba con css???
por cierto, mi nuevo blog es a96games.blogspot.com recien utilice tu efecto y me sirvio muchisimo, grax!!!!
yz Ascesino96 aquí sólo se usa css no interfiere con ningún script, de todas formas tengo una entrada en borrador sobre este tema, intentaré terminarla mañana :)
Hola Gem@, gran parte del intento por subir un blog se lo debo a lo que aprendo con el tuyo.
Tengo una dificultad con los margenes de los contenidos en la sidebar, en realidad no existen en mi plantilla -o eso creo-.
Te lo dejo para que en algún momento puedas darme una opinión sobre alguna medida que no tomé.http://it843.blogspot.com
Si el banner Gem@ blob no te parece bien -por su forma rectangular- solo me lo decís.
Un abrazo desde Uruguay para vos.
Más vale tarde qe nunca, jeje. Ya tengo esquinas redondeadas gracias a ti. MUAK.
:: Estupendo Anabel, voy responder otro comentario tuyo que vi de pasada.
Poco a poco se llega a Roma ¿has visto? ;)
:: Siento no ver tu comentario antes "w" si aún no lo has resuelto házmelo saber :)
Bueno Gema te quiero comentar que en mi blog las esquinas redondeadas venían en la plantilla, pero no sé como hacer que permanezcan en las esquinas cuando quiero ampliar el tamaño de las columnas central y sidebar.
¿Sabrías cómo no perderlas al ampliarlo?
Gracias.
Te dejo la dirección de mi blog para que te hagas una idea.
http://www.hhjarduerak.blogspot.com/
:: Blanca Besga las esqueinas de tu blog son imágenes por eso al ampliar la plantilla no coinciden, hay una forma de conseguir que las esquinas queden redondeadas y se trata de añadir un script con algún que otro cambio pero la novedad es que puede visualizarse con Explorer cosa que hasta hace unos días era imposible.
Puedes ver esa entrada de Vagabundia a la que me refiero: %% Bordes redondeados en Internet Explorer
En el nuevo blogger nose puede poner! :/ osea, no encuentro el codigo #sidebar-wrapper
Ayudame pleaseee
http://yoamoaselenagomezeditions.blogspot.com
Yo tampoco encuentrro el #sidebar-wrapper
Te agradeceriamos si nois ayudaras :D
http://espacio846.blogspot.com/
:: bryan846 tu plantilla no tiene #sidebar-wrapper en su lugar viene column-right-outer :)
Nota: solo los miembros de este blog pueden publicar comentarios.